<template>
  <section id="game_section_id" style="background: #000;">
    <div class="levelSwitchBox" id="levelSwitchBox" style="display: block;">
      <img id="levelSwitchBoxMain" class="levelSwitchBoxMain" src="../../../../../static/mobile/js/kouhong/img/level_1_main.jpg">
    </div>
    <!-- <div class="PopupBox" id="gameOverBox">
            <div id="gameOverBoxTitle">通关赢取更多奖励</div>
            <div class="PopupBoxBtn" id="gameStartBoxBtn">开始闯关</div>
        </div> -->
    <div class="PopupBox" id="gameOverBox" style="display: none;">
      <div id="gameOverBoxTitle">闯关失败，获得{{num}}积分</div>
      <div class="PopupBoxBtn" @click="goHome();" id="gameOverBoxBtn">重新闯关</div>
    </div>
    <div class="PopupBox" id="gameSuccessBox" style="display: none;">
      <div id="gameSuccessBoxText">恭喜您，闯关成功</div>
      <div class="PopupBoxBtn" @click="goUrl('/prizeList');" id="gameSuccessBoxBtn">点击领取</div>
    </div>
    <!-- blur -->
    <div class="layoutRoot " id="app" data-game_id="undefined" data-openid="">
      <div class="game" id="game" style="width: 596px; height: 938px;">
        <div class="account">
          <span></span>
        </div>
        <div class="bulletsNumBox">
          <img class="bulletsNum" id="bulletsNum1" src="../../../../../static/mobile/js/kouhong/img/6.png">
          <!--<img class="bulletsNum" id="bulletsNum2" src="https://h5.lipstick.lemiao.xyz/play/trail/?h5=1&amp;unionid=orLqYwz20BqFmMvAjg97kcEykaTo" style="display: none;">-->
        </div>
        <canvas style="position: relative;z-index: 3" id="gameStage" width="596" height="938"></canvas>
        <div id="bm" style="width: 100%; height: 100%;position: fixed;background-color: rgba(0,0,0,0);top: 5.3rem; transform: translate(-5%,-1%); z-index: 2">
        </div>
        <div class="tips">
          <p id="currentLevel">当前关数: <span>1</span></p>
          <p id="gameTip"></p>
        </div>

        <div class="levelbox" id="levelbox">
          <div class="level"><img id="level_1" src="../../../../../static/mobile/js/kouhong/img/level_icon_1_active.png"></div>
          <div class="level"><img id="level_2" src="../../../../../static/mobile/js/kouhong/img/level_icon_2.png"></div>
          <div class="level"><img id="level_3" src="../../../../../static/mobile/js/kouhong/img/level_icon_3.png"></div>
        </div>
        <div id="timebox">0</div>
      </div>
    </div>
  </section>
</template>
<script>
  import jQuery from 'jquery';
  import  '../../../../../static/mobile/js/kouhong/js/bodymovin';
  import  '../../../../../static/mobile/js/kouhong/js/jquery.cookie';
  import  '../../../../../static/mobile/js/kouhong/js/JicemoonMobileTouch';
  import '../../../../../static/mobile/js/kouhong/js/HardestGame';
  import '../../../../../static/mobile/js/kouhong/css/game.css';
  import level_2_mains from '../../../../../static/mobile/js/kouhong/img/level_2_mains.jpg';

  import gameService from '../../api/gameService';
  export default {
    name:'game',
    data() {
      return {
        hg:null,
        goodsId:this.$route.query.goodsId,
        num:this.$route.query.num,
        gameId:'',
      }
    },
    methods: {
      goHome() {
        var url = window.location.origin + window.location.pathname+'?vt='+new Date().getTime() + '#/index?auth=1';
        window.location.href = url;
      },
      _gameStart(){
        gameService.gameStart({goodsId:this.goodsId}).then((rsp)=>{
          if(rsp.result) {
            this.gameId = rsp.obj.gameId;
            this._initGame(rsp.obj.gParams);
          }else {
            this.$toast(rsp.errorMsg);
            this.goHome();
          }
      }).catch((error)=>{
          this.$toast('接口异常'+error);
      });
      },

      goUrl(url) {
        this.$nocacheRouter(url);
      },

      _initGame(gParams){
        document.getElementById("levelSwitchBox").addEventListener("webkitAnimationEnd", function() {
          $("#levelSwitchBox").css("display","none")
          $("#levelSwitchBoxMain").attr("src",level_2_mains)
          $("#levelSwitchBox").removeClass("hidden")
        })
        $("#levelSwitchBox").addClass("hidden");
        if(!this.hg){
          this.createHg(gParams);
        }
      },
      createHg(gParams){
        var that = this;
        //初始化游戏, 两个参数分别表示"游戏所处的canvas画布元素"和"关卡设置, 可以省略(省略后将使用默认设置)"
        this.hg = new HardestGame(document.getElementById("gameStage"),false,gParams);
        var hg = this.hg;
        //游戏成功过关
        hg.levelSuccessHandle = function (){
          if(hg.level<4){
            // playAudioInWechat($("#success_audio").get(0));
            document.getElementById("currentLevel").getElementsByTagName("span")[0].innerHTML = hg.level;
            var time = 4;
            var interval = setInterval(function (){
              time--;
              if(time <= 0){
                clearInterval(interval);
                hg.gameContinue(true);
              }
            },1000);
          }else{
            var lev = hg.level -1;
            gameService.gameSuccess({level:lev,goodsId:that.goodsId,gameId:that.gameId}).then((rsp)=>{
              if(rsp.result) {
                $("#app").addClass("blur")
                $("#gameSuccessBox").css("display","block")
                $("#gameSuccessBoxBtn").on("click",function(){
                })
              }else {
                this.$toast(rsp.errorMsg);
                this.goHome();
              }
            }).catch((error)=>{
                this.$toast('接口异常'+error);
            });
          }
        }
        //游戏失败结束
        hg.gameOverHandle = function (){
          clearInterval(timeboxInterval);
          hg=null;
          var level=this.level;
          if(hg){hg = null;}
          gameService.gameFail({level:level,goodsId:that.goodsId,gameId:that.gameId}).then((rsp)=>{
            if(rsp.result) {
              $("#gameOverBox").css("display","block");
              $("#app").addClass("blur");
            }else {
              this.$toast(rsp.errorMsg);
              this.goHome();
            }
        }).catch((error)=>{
            this.$toast('接口异常'+error);
        });


        };
        //初始化游戏
        hg.init();
        hg.canvas.parentNode.style.width = hg.canvas.width + "px";
        hg.canvas.parentNode.style.height = hg.canvas.height + "px";
        //游戏开始
        hg.gameStart();
        document.getElementById("currentLevel").getElementsByTagName("span")[0].innerHTML = hg.level;
      },
    },

    beforeRouteLeave(to, from, next) {
      $('html,body').css('overflow','auto');
      document.body.removeEventListener('touchmove', bodyScroll, {
        passive: false
      });
      if(timeboxInterval){
        clearInterval(timeboxInterval);
      };
      next();
    },

    mounted(){
      $('html,body').css('overflow','hidden');
      //阻止默认的处理方式(阻止下拉滑动的效果)
      document.body.addEventListener('touchmove', bodyScroll, {
        passive: false
      });
      this._gameStart();

    }
  };

  function bodyScroll(event) {
    event.preventDefault();
  }
</script>
<style scoped>

</style>


